<template>
  <div id="teamAddPage">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="updateTeamData.name"
            name="name"
            label="队伍名称"
            placeholder="请输入队伍名称"
            :rules="[{ required: true, message: '请输入队伍名称' }]"
        />
        <van-field
            v-model="updateTeamData.description"
            rows="4"
            autosize
            type="textarea"
            name="description"
            label="队伍描述"
            placeholder="请输入队伍描述"
        />
        <van-field
            is-link
            readonly
            name="datePicker"
            label="过期时间"
            :placeholder="updateTeamData.expireTime?? '点击选择过期时间'"
            @click="showDatePicker = true"
        />
        <van-popup v-model:show="showDatePicker" position="bottom">
          <van-date-picker
              type="date"
              v-model="showDate"
              title="请选择过期时间"
              :min-date="minDate"
              @cancel="showDatePicker = false"
              @confirm="onConfirm"

          />
        </van-popup>

        <van-field name="stepper" label="最大人数">
          <template #input>
            <van-stepper v-model="updateTeamData.maxNum" max="10" min="3"/>
          </template>
        </van-field>
        <van-field name="radio" label="队伍状态">
          <template #input>
            <van-radio-group v-model="updateTeamData.status" direction="horizontal">
              <van-radio name="0">公开</van-radio>
              <van-radio name="1">私有</van-radio>
              <van-radio name="2">加密</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
            v-if="Number(updateTeamData.status) === 2"
            v-model="updateTeamData.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入队伍密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />

      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>

  </div>
</template>

<script setup lang="ts">

import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {UpdateTeamParams} from "../models/team";
import {ResponseResult} from "../models/resopnse";
import myAxios from "../plugins/myAxios";
import {showFailToast, showSuccessToast} from "vant";
import {formData} from "../plugins/dateformat.ts";

const route = useRoute()
const router = useRouter()

const updateTeamData = ref<UpdateTeamParams>({expireTime: "", id: "", maxNum: 2, name: ""})
const id = route.query.id

onMounted(async () => {
  if (Number(id) <= 0) {
    showFailToast('队伍加载失败，请重试')
    return
  }
  const res: ResponseResult<UpdateTeamParams> = await myAxios.get('/team/get', {
    params: {
      id,
    }
  })
  if (res.code === 0) {
    updateTeamData.value = res.data
    // showDate.value = formatDateArray(res.data.expireTime)
  } else {
    showFailToast('队伍加载失败，请重试')
  }
})

// 展示日期选择器
const showDatePicker = ref<boolean>(false)
const minDate = new Date()

const showDate = ref<string[]>([])

const onConfirm = () => {
  updateTeamData.value.expireTime = formData(showDate.value)
  showDatePicker.value = false
}


const onSubmit = async () => {

  const postData = {
    ...updateTeamData.value,
    status: Number(updateTeamData.value.status),
  }
  // todo 前端校验数据
  const res: ResponseResult<number> = await myAxios.post("/team/update", postData)
  console.log(res, "更新请求")
  if (res.code === 0 && res.data) {
    showSuccessToast("更新成功")
    await router.push({
      path: '/team',
      replace: true
    })
  } else {
    showFailToast("更新失败")
  }

}


</script>

<style scoped>

</style>
